<template>
  <div class="nav-bar">
    <!-- navbar插槽 -->
    <div class="left">
      <slot name="left">
        <img src="~assets/images/left.png" alt="" @click="goback"> 
      </slot>
    </div>
    <div class="center"><slot name="center"></slot></div>
    <div class="right"><slot name="right"></slot></div>
  </div>
</template>
<script>

export default {
  methods:{
    goback(){
      this.$router.go(-1)
    }
  }
}
</script>
<style scoped>
 .nav-bar{
    height: 44px;
    line-height: 44px;
    display:flex;
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    z-index: 9;
    text-align: center;
    box-shadow: 0 1px 1px rgba(100, 100, 100, 0.1);
    background-color: var(--color-tint);
    color: #fff;
  }
  .left, .right{
    width: 60px;
  }
  .center{
    flex: 1;
  }
  .left {
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.left  img {
  width: 28px;
  height: 28px;
}
</style>
